<template>
    <div>
        <div class="header">
            职员管理
        </div>
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
                <el-form-item label="门店" label-width="40px">
                    <el-input v-model="query.key" placeholder="门店名" style="width:120px" clearable></el-input>
                </el-form-item>
                <el-form-item label="服务范围">
                    <el-select v-model="query.services" placeholder="请选择" clearable style="width:130px">
                        <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left:40px">
                    <el-button type="primary" style="width:100px" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 添加/批量删除 -->
        <div style="padding:0 25px">
            <el-button type="primary" style="width:100px" @click="dialogVisible = true">添加</el-button>
            <el-button type="danger" style="width:100px">批量删除</el-button>
        </div>
        <!-- 表单 -->
        <div style="padding:20px">
            <Table :selection="selection" :tableCols="tableCols" :tableData="tableData" :total="total"
                @pagechenge="pagechenge">
                <!-- 时间 -->
                <template #addtime="{ row }">
                    <span v-if="row.startTime != null">{{ row.startTime.substr(0, 19) }}~{{ row.endTime.substr(0, 19)
                    }}</span>
                </template>
                <!-- 类型 -->
                <template #name="{ row }">
                        <span @click="dialogVisibles = true">{{ row.name }}</span>
                    </template> 
                <!-- 图片 -->
                <template #logo="{ row }">
                    <div v-if="row.logo != ''">
                        <el-image style="width: 45px; height: 45px" :src="IMGURL + row.logo" fit="contain"></el-image>
                    </div>
                    <div v-else>
                        暂无图片
                    </div>
                </template>
                <!-- 操作 -->   
                <template #option="{ row }">
                    <el-button type="success" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.id)">删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 添加 -->
        <div>
            <Add :dialogVisible="dialogVisible"  @isclose="isclose" :handleClickdata="handleClickdata"></Add>
        </div>
    </div>
</template>

<script>
import Table from '@/components/Table/Table.vue'
import Add from '@/components/add/addstores.vue'
import { ervices, storeslist } from '@/api/stores'
// 图片路径
import { IMGURL } from "@/api/config"
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            IMGURL: IMGURL,
            dialogVisible: false,
            form: {

            },
            total: 0,
            query: {
                page: 1,
                psize: 5,
                key: ''
            },
            type: [],
            tableCols: [
                {
                    prop: "id",
                    lable: "ID",
                },
                {
                    lable: "门店",
                    coltype: "name",
                    slotname: "name",
                },
                {
                    prop: "address",
                    lable: "地址",
                },
                {
                    coltype: "logo",
                    slotname: "logo",
                    lable: "门店logo",
                },
                {
                    prop: "services",
                    lable: "服务范围",
                },
                {
                    prop: "username",
                    lable: "店主",
                },
                {
                    prop: "tel",
                    lable: "联系电话",
                },
                {
                    lable: "营业时间",
                    coltype: "addtime",
                    slotname: "addtime"
                },
                {
                    lable: "操作",
                    coltype: "option",
                    slotname: "option"
                },
            ],
            tableData: [],
            selection: true,
            handleClickdata:{}
        }
    },
    created() {
        // 获取门店经营范围
        this.getervices()

        this.getstoreslist()
    },
    methods: {
        // 获取门店经营范围
        async getervices() {
            let res = await ervices()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },

        async getstoreslist() {
            let res = await storeslist(this.query)
            if (res.errCode == 10000) {
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        onSubmit() {
            this.getstoreslist()
        },
        isclose(val, isrefresh = false){
            this.dialogVisible = val
            if(isrefresh){
                this.getstoreslist()
            }
        },
        //分页
        pagechenge(val) {
            this.query = val
            this.getstoreslist()
        },
        handleClick(val){
            this.handleClickdata = val
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.top {
    padding: 0 30px;
}
</style>